<!DOCTYPE html>
<html  lang="zh-CN" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="theme-color" content="#fff" id="theme-color">
  <meta name="description" content="深山磨柴斧，一鸣震江湖">
  <link rel="icon" href="/img/ic_head.jpg">
  <title>010-Android自定义View(5)：画布Canvas详解(图文)</title>
  
  
  <meta property="og:title" content="010-Android自定义View(5)：画布Canvas详解(图文)">
  
  
  <meta property="og:url" content="http://example.com/2019/07/01/010-Android%E8%87%AA%E5%AE%9A%E4%B9%89View(5)%EF%BC%9A%E7%94%BB%E5%B8%83Canvas%E8%AF%A6%E8%A7%A3(%E5%9B%BE%E6%96%87)/index.html">
  
  
  <meta property="og:img" content="/img/ic_head.jpg">
  
  
  <meta property="og:img" content="深山磨柴斧，一鸣震江湖">
  
  
  <meta property="og:type" content="article">
  <meta property="og:article:published_time" content="2019-07-01">
  <meta property="og:article:modified_time" content="2021-04-14">
  <meta property="og:article:author" content="Cupster">
  
  
  <meta property="og:article:tag" content="Android">
  
  <meta property="og:article:tag" content="Android自定义View">
  
  
  
  
  <script>
    // control reverse button
    var reverseDarkList = {
      dark: 'light',
      light: 'dark'
    };
    var themeColor = {
      dark: '#1c1c1e',
      light: '#fff'
    }
    // get the data of css prefers-color-scheme
    var getCssMediaQuery = function() {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };
    // reverse current darkmode setting function
    var reverseDarkModeSetting = function() {
      var setting = localStorage.getItem('user-color-scheme');
      if(reverseDarkList[setting]) {
        setting = reverseDarkList[setting];
      } else if(setting === null) {
        setting = reverseDarkList[getCssMediaQuery()];
      } else {
        return;
      }
      localStorage.setItem('user-color-scheme', setting);
      return setting;
    };
    // apply current darkmode setting
    var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
      } else {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
      }
    };
    setDarkmode();
  </script>
  <script>
    function loadScript(url, cb) {
      var script = document.createElement('script');
      script.src = url;
      if (cb) script.onload = cb;
      script.async = true;
      document.body.appendChild(script);
    }
  </script>
  
  <link rel="preload" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css" as="style" >
  <link rel="preload" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css" as="style" >
  
  <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.js" as="script">
  <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.css" as="style" >
  
  
  <link rel="preload" href="/js/lib/lozad.min.js" as="script">
  
  
  
  
  
  
  
  
<link rel="stylesheet" href="/css/main.css">

  
  
<link rel="stylesheet" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css">

  
  
<link rel="stylesheet" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css">

  
  
<link rel="stylesheet" href="/js/lib/lightbox/baguetteBox.min.css">

  
  
  
  
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <div class="wrapper">
    
    <nav class="navbar">
  <div class="navbar-logo">
    <span class="navbar-logo-main">
      
      <img class="navbar-logo-img" src="/img/ic_head.jpg" alt="logo">
      
      <span class="navbar-logo-dsc">不负明天</span>
    </span>
  </div>
  <div class="navbar-menu">
    
    <a href="/" class="navbar-menu-item">
    
    首页
    
    </a>
    
    <a href="/archives" class="navbar-menu-item">
    
    归档
    
    </a>
    
    <a href="/tags" class="navbar-menu-item">
    
    标签
    
    </a>
    
    <a href="/categories" class="navbar-menu-item">
    
    分类
    
    </a>
    
    <a href="/about" class="navbar-menu-item">
    
    关于
    
    </a>
    
    <a href="/links" class="navbar-menu-item">
    
    友链
    
    </a>
    
    <a class="navbar-menu-item darknavbar" id="dark"><i class="iconfont icon-weather"></i></a>
    <a class="navbar-menu-item searchnavbar" id="search"><i class="iconfont icon-search" style="font-size: 1.2rem; font-weight: 400;"></i></a>
  </div>
</nav>
    
    <div id="local-search" style="display: none;">
      <input class="navbar-menu-item" id="search-input" placeholder="请输入搜索内容...">
      <div id="search-content"></div>
    </div>
    
    <div class="section-wrap">
      <div class="container">
        <div class="columns">
          <main class="main-column">
<article class="card card-content">
  <header>
    <h1 class="post-title">
      010-Android自定义View(5)：画布Canvas详解(图文)
    </h1>
  </header>
  <div class="post-meta post-show-meta">
    <time datetime="2019-07-01T04:03:34.000Z">
      <i class="iconfont icon-calendar" style="margin-right: 2px;"></i>
      <span>2019-07-01</span>
    </time>
    
    <span class="dot"></span>
    
    <a href="/categories/Android/" class="post-meta-link">Android</a>
    
    
    
    <span class="dot"></span>
    <span>1.7k 字</span>
    
  </div>
  
  <div class="post-meta post-show-meta" style="margin-top: -10px;">
    <div style="display: flex; align-items: center;">
      <i class="iconfont icon-biaoqian" style="margin-right: 2px; font-size: 1.15rem;"></i>
      
      
        <a href="/tags/Android/" class="post-meta-link">Android</a>
      
      
      <span class="dot"></span>
      
        <a href="/tags/Android自定义View/" class="post-meta-link">Android自定义View</a>
      
    </div>
  </div>
  
  </header>
  <div id="section" class="post-content">
    <h1 id="1-简介"><a href="#1-简介" class="headerlink" title="1.简介"></a>1.简介</h1><p>Android系统提供Canvas、Paint 、Path三剑客用于绘制View图形。</p>
<p>如果将自定义View的绘制看作美术课绘画作业的话，</p>
<p>Canvas可视为画板上的空白画布，</p>
<p>Paint可视为画笔，</p>
<p>Path可视为绘画者的执笔路径。</p>
<p>其他坐标系等基础，可参考阅读：<a target="_blank" rel="noopener" href="https://blog.csdn.net/Cupster/article/details/112055331">自定义View(1):基础</a></p>
<h1 id="2-Canvas-的常用功能"><a href="#2-Canvas-的常用功能" class="headerlink" title="2.Canvas 的常用功能"></a>2.Canvas 的常用功能</h1><table>
<thead>
<tr>
<th>方法</th>
<th>功能</th>
</tr>
</thead>
<tbody><tr>
<td>drawColor()</td>
<td>设置画布颜色</td>
</tr>
<tr>
<td>drawCircle()</td>
<td>绘制圆形</td>
</tr>
<tr>
<td>drawRect()</td>
<td>绘制矩形</td>
</tr>
<tr>
<td>drawRoundRect()</td>
<td>绘制带圆角的矩形</td>
</tr>
<tr>
<td>drawArc()</td>
<td>绘制扇形 or 弧线</td>
</tr>
<tr>
<td>drawPoint()</td>
<td>绘制点</td>
</tr>
<tr>
<td>drawPoints()</td>
<td>绘制多个点</td>
</tr>
<tr>
<td>drawLine()</td>
<td>绘制线</td>
</tr>
<tr>
<td>drawLines()</td>
<td>绘制多条线</td>
</tr>
<tr>
<td>drawOval</td>
<td>绘制椭圆</td>
</tr>
<tr>
<td>drawPath()</td>
<td>按预设画笔路径，绘制 对应得图形</td>
</tr>
<tr>
<td>drawBitmap()</td>
<td>在指定位置，绘制Bitmap对象</td>
</tr>
<tr>
<td>drawText()</td>
<td>绘制文字</td>
</tr>
<tr>
<td>clipPath()</td>
<td>根据自定义图形裁剪</td>
</tr>
<tr>
<td>clipRect()</td>
<td>按矩形裁剪</td>
</tr>
</tbody></table>
<h1 id="3-使用"><a href="#3-使用" class="headerlink" title="3. 使用"></a>3. 使用</h1><h2 id="3-1-drawColor-amp-drawCircle"><a href="#3-1-drawColor-amp-drawCircle" class="headerlink" title="3.1 drawColor() &amp; drawCircle()"></a>3.1 drawColor() &amp; drawCircle()</h2><img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111115147_11wCFj.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111115147_11wCFj.png" class="lozad post-image">

<pre class="highlight"><span class="line"><span class="keyword">package</span> com.cupster.base_super_resource;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.content.Context;</span><br><span class="line"><span class="keyword">import</span> android.graphics.Canvas;</span><br><span class="line"><span class="keyword">import</span> android.graphics.Color;</span><br><span class="line"><span class="keyword">import</span> android.graphics.Paint;</span><br><span class="line"><span class="keyword">import</span> android.graphics.Path;</span><br><span class="line"><span class="keyword">import</span> android.util.AttributeSet;</span><br><span class="line"><span class="keyword">import</span> android.view.View;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> androidx.annotation.Nullable;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">CanvasView</span> <span class="keyword">extends</span> <span class="title">View</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    Paint mPaint;</span><br><span class="line">    Path mPath ;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">private</span> <span class="keyword">void</span>  <span class="title">initSetting</span><span class="params">()</span></span>&#123;</span><br><span class="line">        mPaint = <span class="keyword">new</span> Paint();</span><br><span class="line">        mPath = <span class="keyword">new</span> Path();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDraw</span><span class="params">(Canvas canvas)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onDraw(canvas);</span><br><span class="line">        <span class="comment">// 0. onDraw可能多次调用，每次绘制前都先复原paint&amp;path</span></span><br><span class="line">        mPaint.reset();</span><br><span class="line">        mPath.reset();</span><br><span class="line">        <span class="comment">//1. 设置画布底色</span></span><br><span class="line"><span class="comment">//        canvas.drawColor(Color.RED);</span></span><br><span class="line"><span class="comment">//        canvas.drawColor(getResources().getColor(R.color.colorAccent));//使用xml定义的全局颜色</span></span><br><span class="line">        canvas.drawColor(Color.parseColor(<span class="string">&quot;#e5f7ff&quot;</span>));<span class="comment">//使用自定义颜色</span></span><br><span class="line"><span class="comment">//        canvas.drawRGB(255 ,0 ,0 );//rgb</span></span><br><span class="line"><span class="comment">//        canvas.drawARGB(127 ,255 ,0 ,0 );//argb</span></span><br><span class="line">        <span class="comment">//2. 绘制圆</span></span><br><span class="line">        mPaint.setColor(Color.parseColor(<span class="string">&quot;#ff8696&quot;</span>));</span><br><span class="line">        <span class="comment">// 参数1 圆心x ; 参数2 圆心y ; 参数3 半径r ;</span></span><br><span class="line">        canvas.drawCircle(<span class="number">200</span> ,<span class="number">200</span>,<span class="number">120</span> ,mPaint);<span class="comment">//java代码中直接使用的绘制单位是px,xml中使用的是dp</span></span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">CanvasView</span><span class="params">(Context context)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>(context);</span><br><span class="line">        initSetting();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">CanvasView</span><span class="params">(Context context, <span class="meta">@Nullable</span> AttributeSet attrs)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>(context, attrs);</span><br><span class="line">        initSetting();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">CanvasView</span><span class="params">(Context context, <span class="meta">@Nullable</span> AttributeSet attrs, <span class="keyword">int</span> defStyleAttr)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>(context, attrs, defStyleAttr);</span><br><span class="line">        initSetting();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">CanvasView</span><span class="params">(Context context, <span class="meta">@Nullable</span> AttributeSet attrs, <span class="keyword">int</span> defStyleAttr, <span class="keyword">int</span> defStyleRes)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>(context, attrs, defStyleAttr, defStyleRes);</span><br><span class="line">        initSetting();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre>

<p>布局文件中使用</p>
<pre class="highlight"><span class="line">&lt;com.cupster.base_super_resource.CanvasView</span><br><span class="line">           android:layout_width=&quot;200dp&quot;</span><br><span class="line">           android:layout_height=&quot;200dp&quot;/&gt;</span><br></pre>


<h2 id="3-2-DrawRect"><a href="#3-2-DrawRect" class="headerlink" title="3.2 DrawRect()"></a>3.2 DrawRect()</h2><img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111151144_pYd7kT.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111151144_pYd7kT.png" class="lozad post-image">

<img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111151803_BPMI5M.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111151803_BPMI5M.png" class="lozad post-image">


<pre class="highlight"><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">CanvasView</span> <span class="keyword">extends</span> <span class="title">View</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    Paint mPaint;</span><br><span class="line">    Path mPath ;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">private</span> <span class="keyword">void</span>  <span class="title">initSetting</span><span class="params">()</span></span>&#123;</span><br><span class="line">        mPaint = <span class="keyword">new</span> Paint();</span><br><span class="line">        mPath = <span class="keyword">new</span> Path();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDraw</span><span class="params">(Canvas canvas)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onDraw(canvas);</span><br><span class="line">        <span class="comment">// 0. onDraw可能多次调用，每次绘制前都先复原paint&amp;path</span></span><br><span class="line">        mPaint.reset();</span><br><span class="line">        mPath.reset();</span><br><span class="line">        canvas.drawColor(Color.parseColor(<span class="string">&quot;#e5f7ff&quot;</span>));<span class="comment">//使用自定义颜色</span></span><br><span class="line">        <span class="comment">//3. 绘制矩形</span></span><br><span class="line">        mPaint.setColor(Color.parseColor(<span class="string">&quot;#ff8696&quot;</span>));</span><br><span class="line">        <span class="comment">//参数1：矩形【左】上角坐标x;参数2：矩形【左】上角坐标y; 参数3:矩形【右】下角坐标x ;参数4：矩形【右】下角坐标y</span></span><br><span class="line">        canvas.drawRect(<span class="number">50</span> ,<span class="number">50</span> ,<span class="number">150</span> ,<span class="number">250</span> ,mPaint);</span><br><span class="line"><span class="comment">//        canvas.drawRect(new Rect(50 ,50 ,250 ,250 ),mPaint);//效果同上  </span></span><br><span class="line">   <span class="comment">//4. 绘制圆角矩形</span></span><br><span class="line"><span class="comment">//        if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) &#123;</span></span><br><span class="line"><span class="comment">//            canvas.drawRoundRect(100, 100, 350, 220, 50, 50, mPaint);</span></span><br><span class="line"><span class="comment">//        &#125;      </span></span><br><span class="line">  &#125;</span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">CanvasView</span><span class="params">(Context context)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>(context);</span><br><span class="line">        initSetting();</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">CanvasView</span><span class="params">(Context context, <span class="meta">@Nullable</span> AttributeSet attrs)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>(context, attrs);</span><br><span class="line">        initSetting();</span><br><span class="line">    &#125;</span><br></pre>

<h1 id="3-3-drawPoint-amp-drawPoints"><a href="#3-3-drawPoint-amp-drawPoints" class="headerlink" title="3.3 drawPoint() &amp; drawPoints()"></a>3.3 drawPoint() &amp; drawPoints()</h1><img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111160645_PvCWpm.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111160645_PvCWpm.png" class="lozad post-image">

<img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111154836_FxDuCa.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111154836_FxDuCa.png" class="lozad post-image">


<pre class="highlight"><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDraw</span><span class="params">(Canvas canvas)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onDraw(canvas);</span><br><span class="line">        <span class="comment">// 0. onDraw可能多次调用，每次绘制前都先复原paint&amp;path</span></span><br><span class="line">        mPaint.reset();</span><br><span class="line">        mPath.reset();</span><br><span class="line">        canvas.drawColor(Color.parseColor(<span class="string">&quot;#e5f7ff&quot;</span>));<span class="comment">//使用自定义颜色</span></span><br><span class="line">        mPaint.setColor(Color.parseColor(<span class="string">&quot;#ff8696&quot;</span>));</span><br><span class="line">        <span class="comment">//. 绘制原点：点形状 大小由 paint决定</span></span><br><span class="line">        mPaint.setStrokeWidth(<span class="number">20</span>);<span class="comment">//画笔宽度</span></span><br><span class="line">        mPaint.setAntiAlias(<span class="keyword">true</span>);<span class="comment">//抗锯齿效果</span></span><br><span class="line">        mPaint.setStyle(Paint.Style.STROKE);<span class="comment">//描边</span></span><br><span class="line">        mPaint.setStrokeCap(Paint.Cap.ROUND);<span class="comment">//设置线头的模式</span></span><br><span class="line">        canvas.drawPoint(  <span class="number">80</span> ,<span class="number">80</span>,mPaint);<span class="comment">//圆心坐标x,y</span></span><br><span class="line">        <span class="comment">//绘制多个圆点</span></span><br><span class="line"><span class="comment">//        float[] points = &#123;10, 10, 35, 35, 30, 80, 80, 30, 80, 80, 120, 60&#125;;</span></span><br><span class="line"><span class="comment">//        canvas.drawPoints(points , 2 ,points.length-2 ,mPaint);//画部分点:p1:点集合，两个一组；p2：跳过几个集合参数;p3:使用多少个集合参数；p4:画笔</span></span><br><span class="line"><span class="comment">//        canvas.drawPoints(points ,mPaint);//全画</span></span><br><span class="line">    &#125;</span><br></pre>

<h1 id="3-4-drawOval"><a href="#3-4-drawOval" class="headerlink" title="3.4 drawOval()"></a>3.4 drawOval()</h1><img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111161407_2Cu6O7.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111161407_2Cu6O7.png" class="lozad post-image">

<pre class="highlight"><span class="line"><span class="meta">@Override</span></span><br><span class="line"> <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDraw</span><span class="params">(Canvas canvas)</span> </span>&#123;</span><br><span class="line">     <span class="keyword">super</span>.onDraw(canvas);</span><br><span class="line">     <span class="comment">// 0. onDraw可能多次调用，每次绘制前都先复原paint&amp;path</span></span><br><span class="line">     mPaint.reset();</span><br><span class="line">     mPath.reset();</span><br><span class="line">     canvas.drawColor(Color.parseColor(<span class="string">&quot;#e5f7ff&quot;</span>));<span class="comment">//使用自定义颜色</span></span><br><span class="line">     mPaint.setColor(Color.parseColor(<span class="string">&quot;#ff8696&quot;</span>));</span><br><span class="line">       <span class="comment">//6. 绘制椭圆</span></span><br><span class="line">     <span class="keyword">if</span> (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) &#123;</span><br><span class="line">         <span class="comment">//参数1：椭圆对应矩形【左】上角坐标x;参数2：椭圆对应矩形【左】上角坐标y; 参数3:椭圆对应矩形【右】下角坐标x ;参数4：椭圆对应矩形【右】下角坐标y</span></span><br><span class="line">         canvas.drawOval(<span class="number">30</span>,<span class="number">30</span> ,<span class="number">220</span> ,<span class="number">120</span>,mPaint);</span><br><span class="line">     &#125;</span><br></pre>

<h1 id="3-5-drawLine-amp-drawLines"><a href="#3-5-drawLine-amp-drawLines" class="headerlink" title="3.5 drawLine() &amp; drawLines()"></a>3.5 drawLine() &amp; drawLines()</h1><img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111163808_EQno6y.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111163808_EQno6y.png" class="lozad post-image">


<img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111164228_uKXQpf.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111164228_uKXQpf.png" class="lozad post-image">


<img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111164252_nK8V3l.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111164252_nK8V3l.png" class="lozad post-image">


<pre class="highlight"><span class="line"><span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDraw</span><span class="params">(Canvas canvas)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onDraw(canvas);</span><br><span class="line">        <span class="comment">// 0. onDraw可能多次调用，每次绘制前都先复原paint&amp;path</span></span><br><span class="line">        mPaint.reset();</span><br><span class="line">        mPath.reset();</span><br><span class="line"> canvas.drawColor(Color.parseColor(<span class="string">&quot;#e5f7ff&quot;</span>));<span class="comment">//使用自定义颜色</span></span><br><span class="line">       mPaint.setColor(Color.parseColor(<span class="string">&quot;#ff8696&quot;</span>));</span><br><span class="line"> <span class="comment">//7. 画线</span></span><br><span class="line"></span><br><span class="line">        mPaint.setStrokeWidth(<span class="number">6</span>);</span><br><span class="line">        <span class="comment">//4个参数值对应的是两端点的坐标</span></span><br><span class="line">        <span class="comment">//canvas.drawLine(30,30,120,120,mPaint);</span></span><br><span class="line">        <span class="keyword">float</span>[] points = &#123;<span class="number">10</span>, <span class="number">10</span>, <span class="number">35</span>, <span class="number">35</span>, <span class="number">35</span>, <span class="number">35</span>, <span class="number">80</span>, <span class="number">30</span>, <span class="number">80</span>, <span class="number">30</span>, <span class="number">120</span>, <span class="number">60</span>&#125;;</span><br><span class="line"><span class="comment">//        canvas.drawLines(points ,4 ,points.length -4 ,mPaint);</span></span><br><span class="line">        canvas.drawLines(points ,mPaint);</span><br></pre>

<h1 id="3-6-绘制弧线-amp-扇形"><a href="#3-6-绘制弧线-amp-扇形" class="headerlink" title="3.6 绘制弧线 &amp; 扇形"></a>3.6 绘制弧线 &amp; 扇形</h1><img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111172028_P8LWM2.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111172028_P8LWM2.png" class="lozad post-image">

<pre class="highlight"><span class="line"><span class="meta">@Override</span></span><br><span class="line"><span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDraw</span><span class="params">(Canvas canvas)</span> </span>&#123;</span><br><span class="line">    <span class="keyword">super</span>.onDraw(canvas);</span><br><span class="line">    mPaint.reset();</span><br><span class="line">    mPath.reset();</span><br><span class="line">    canvas.drawColor(Color.parseColor(<span class="string">&quot;#e5f7ff&quot;</span>));</span><br><span class="line">    mPaint.setColor(Color.parseColor(<span class="string">&quot;#000000&quot;</span>));</span><br><span class="line">    <span class="comment">//8. 画弧线/扇形</span></span><br><span class="line">    <span class="keyword">if</span> (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) &#123;</span><br><span class="line">        <span class="comment">//前4个参数： 所依据的椭圆（圆）对应的矩形--的 左上角顶点坐标 &amp; 右下角顶点坐标</span></span><br><span class="line">        <span class="comment">//第5个参数 startAngle:起始角度，x轴方向为0度，【特殊】【顺时针为正角度】</span></span><br><span class="line">        <span class="comment">//第6个参数 sweepAngle:扫过的角度，【特殊】【顺时针为正角度】</span></span><br><span class="line">        <span class="comment">//第7个参数 useCenter：是否连接到圆心，true对应连接-扇形 ，false对应不连-弧线</span></span><br><span class="line">        canvas.drawArc(<span class="number">30</span>, <span class="number">30</span>, <span class="number">200</span>, <span class="number">200</span>, -<span class="number">90</span>, <span class="number">90</span>, <span class="keyword">true</span>, mPaint); <span class="comment">// 绘制扇形</span></span><br><span class="line">        mPaint.setStyle(Paint.Style.STROKE);<span class="comment">//画弧线需设置描边、不填充</span></span><br><span class="line">        canvas.drawArc(<span class="number">30</span>, <span class="number">30</span>, <span class="number">200</span>, <span class="number">200</span>, <span class="number">90</span>, <span class="number">90</span>, <span class="keyword">false</span>, mPaint); <span class="comment">// 绘制弧线</span></span><br><span class="line">    &#125;</span><br><span class="line">    &#125;</span><br></pre>

<h1 id="3-7-绘制path"><a href="#3-7-绘制path" class="headerlink" title="3.7 绘制path"></a>3.7 绘制path</h1><img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111172745_GAUe8r.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111172745_GAUe8r.png" class="lozad post-image">

<pre class="highlight"><span class="line">  <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onDraw</span><span class="params">(Canvas canvas)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onDraw(canvas);</span><br><span class="line">        mPaint.reset();</span><br><span class="line">        mPath.reset();</span><br><span class="line">        <span class="comment">//画坐标轴</span></span><br><span class="line">        mPaint.setColor(Color.parseColor(<span class="string">&quot;#101010&quot;</span>));</span><br><span class="line">        mPaint.setStyle(Paint.Style.STROKE);</span><br><span class="line">        mPath.moveTo(<span class="number">120</span>, <span class="number">120</span>);<span class="comment">//y轴顶点(120,120)</span></span><br><span class="line">        mPath.rLineTo(<span class="number">0</span>, <span class="number">200</span>);<span class="comment">//y轴方向 path移动量</span></span><br><span class="line">        mPath.rLineTo(<span class="number">200</span>, <span class="number">0</span>);<span class="comment">//x轴方向 path移动量</span></span><br><span class="line">        canvas.drawPath(mPath, mPaint);<span class="comment">//绘制</span></span><br><span class="line">&#125;</span><br></pre>

<h1 id="3-8-裁剪canvas-clipXxx-amp-canvas-clipOutXxx"><a href="#3-8-裁剪canvas-clipXxx-amp-canvas-clipOutXxx" class="headerlink" title="3.8 裁剪canvas.clipXxx &amp; canvas.clipOutXxx"></a>3.8 裁剪canvas.clipXxx &amp; canvas.clipOutXxx</h1><img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111180039_5YBdks.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111180039_5YBdks.png" class="lozad post-image">

<img src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111180139_DBED3K.png" / srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111180139_DBED3K.png" class="lozad post-image">

<pre class="highlight"><span class="line">canvas.save();</span><br><span class="line">     canvas.clipRect(<span class="number">0</span>,<span class="number">0</span>,<span class="number">128</span>,<span class="number">128</span>);<span class="comment">//裁剪 显示区域</span></span><br><span class="line">     Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_fangzi);</span><br><span class="line">     canvas.drawBitmap(bitmap</span><br><span class="line">             ,<span class="number">64</span> ,<span class="number">64</span><span class="comment">//原bitmap绘制起点坐标</span></span><br><span class="line">             ,mPaint);</span><br><span class="line">     canvas.restore();</span><br></pre>

<pre class="highlight"><span class="line">canvas.save();</span><br><span class="line">       canvas.clipOutRect(<span class="number">0</span>,<span class="number">0</span>,<span class="number">128</span>,<span class="number">128</span>);<span class="comment">//裁剪 显示区域</span></span><br><span class="line">       Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_fangzi);</span><br><span class="line">       canvas.drawBitmap(bitmap</span><br><span class="line">               ,<span class="number">64</span> ,<span class="number">64</span><span class="comment">//原bitmap绘制起点坐标</span></span><br><span class="line">               ,mPaint);</span><br><span class="line">       canvas.restore();</span><br></pre>

<h2 id="3-9-canvas变换"><a href="#3-9-canvas变换" class="headerlink" title="3.9 canvas变换"></a>3.9 canvas变换</h2><img src="https:/ srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111182514_AVpfe1.png" class="lozad post-image"/gitee.com/cupster/picbed/raw/master/uPic/20210111182514_AVpfe1.png"/>

<pre class="highlight"><span class="line"> canvas.save();</span><br><span class="line"><span class="comment">//        canvas.rotate(15 );//绕 （0，0）</span></span><br><span class="line">        canvas.rotate(-<span class="number">90</span> ,<span class="number">130</span>,<span class="number">130</span>);<span class="comment">// 绕指定点 【特殊】【顺时针为正值角度】</span></span><br><span class="line">        canvas.translate( -<span class="number">20</span> ,<span class="number">0</span>);</span><br><span class="line">        canvas.scale(<span class="number">1.5f</span> ,<span class="number">1.0f</span> , <span class="number">130</span> ,<span class="number">130</span> );<span class="comment">//x缩放倍数 y缩放倍数 ，缩放原点x ,缩放原点y</span></span><br><span class="line">        canvas.skew( <span class="number">0.0f</span> ,<span class="number">0.5f</span>);<span class="comment">//错切  倾斜值</span></span><br><span class="line">        canvas.drawBitmap(BitmapFactory.decodeResource(getResources() ,R.mipmap.ic_fangzi)</span><br><span class="line">                ,<span class="number">130</span> ,<span class="number">130</span><span class="comment">//绘制起点坐标</span></span><br><span class="line">                ,mPaint);</span><br><span class="line">        canvas.restore();</span><br></pre>

<h2 id="3-10-matrix自定义变换"><a href="#3-10-matrix自定义变换" class="headerlink" title="3.10 matrix自定义变换"></a>3.10 matrix自定义变换</h2><img src="https:/ srcset="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3C/svg%3E" data-src="https://gitee.com/cupster/picbed/raw/master/uPic/20210111184112_wZNs08.png" class="lozad post-image"/gitee.com/cupster/picbed/raw/master/uPic/20210111184112_wZNs08.png"/>

<pre class="highlight"><span class="line"><span class="comment">//1.创建Matrix对象</span></span><br><span class="line">       Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_fangzi);</span><br><span class="line"></span><br><span class="line">       Matrix matrix = <span class="keyword">new</span> Matrix();</span><br><span class="line">       matrix.reset();</span><br><span class="line">       <span class="comment">//2.几何变换</span></span><br><span class="line">       matrix.postTranslate(<span class="number">0</span>,<span class="number">10</span>);</span><br><span class="line">       matrix.postRotate(<span class="number">45</span>,<span class="number">130</span>,<span class="number">130</span>);</span><br><span class="line">       matrix.postScale(<span class="number">1.3f</span>,<span class="number">1.3f</span>,<span class="number">130</span>,<span class="number">130</span>);</span><br><span class="line">       matrix.postSkew(<span class="number">0</span>,<span class="number">0.3f</span>);</span><br><span class="line">       canvas.save();</span><br><span class="line">       <span class="comment">//3.把几何变换应用到Canvas中</span></span><br><span class="line">       canvas.concat(matrix);</span><br><span class="line">       canvas.drawBitmap(bitmap,<span class="number">130</span>,<span class="number">130</span>,mPaint);</span><br><span class="line">       canvas.restore();</span><br></pre>













  </div>
  <div>
  
  <div class="post-note note-warning copyright" style="margin-top: 42px">
    <p><span style="font-weight: bold;">作者：</span><a target="_blank" rel="nofollow noopener noreferrer" href="http://example.com/about">Cupster</a></p>
    <p><span style="font-weight: bold;">文章链接：</span><a target="_blank" rel="nofollow noopener noreferrer" href="http://example.com/2019/07/01/010-Android%E8%87%AA%E5%AE%9A%E4%B9%89View(5)%EF%BC%9A%E7%94%BB%E5%B8%83Canvas%E8%AF%A6%E8%A7%A3(%E5%9B%BE%E6%96%87)/">http://example.com/2019/07/01/010-Android%E8%87%AA%E5%AE%9A%E4%B9%89View(5)%EF%BC%9A%E7%94%BB%E5%B8%83Canvas%E8%AF%A6%E8%A7%A3(%E5%9B%BE%E6%96%87)/</a></p>
    <p><span style="font-weight: bold;">版权声明：</span>本博客所有文章除特别声明外，均采用<a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">CC BY-NC-SA 4.0 协议</a>。转载请注明出处！</p>
  </div>
  
  </div>
</article>
<div class="nav">
  
  <div class="nav-item-prev">
    <a href="/2019/07/05/011-Android自定义View(6)：画笔Paint/" class="nav-link">
      <i class="iconfont icon-left nav-prev-icon"></i>
      <div>
        <div class="nav-label">上一篇</div>
        
        <div class="nav-title">011-Android自定义View(6)：画笔Paint </div>
        
      </div>
    </a>
  </div>
  
  
  <div class="nav-item-next">
    <a href="/2019/06/29/009-Android自定义View(4)：自绘式详解(图文)/" class="nav-link">
      <div>
        <div class="nav-label">下一篇</div>
        
        <div class="nav-title">009-Android自定义View(4)：自绘式详解(图文) </div>
        
      </div>
      <i class="iconfont icon-right nav-next-icon"></i>
    </a>
  </div>
  
</div>

<div class="card card-content toc-card" id="mobiletoc">
  <div class="toc-header"><i class="iconfont icon-menu" style="padding-right: 2px;"></i>目录</div>
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E7%AE%80%E4%BB%8B"><span class="toc-text">1.简介</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-Canvas-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%8A%9F%E8%83%BD"><span class="toc-text">2.Canvas 的常用功能</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-%E4%BD%BF%E7%94%A8"><span class="toc-text">3. 使用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-1-drawColor-amp-drawCircle"><span class="toc-text">3.1 drawColor() &amp; drawCircle()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-2-DrawRect"><span class="toc-text">3.2 DrawRect()</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-3-drawPoint-amp-drawPoints"><span class="toc-text">3.3 drawPoint() &amp; drawPoints()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-4-drawOval"><span class="toc-text">3.4 drawOval()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-5-drawLine-amp-drawLines"><span class="toc-text">3.5 drawLine() &amp; drawLines()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-6-%E7%BB%98%E5%88%B6%E5%BC%A7%E7%BA%BF-amp-%E6%89%87%E5%BD%A2"><span class="toc-text">3.6 绘制弧线 &amp; 扇形</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-7-%E7%BB%98%E5%88%B6path"><span class="toc-text">3.7 绘制path</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-8-%E8%A3%81%E5%89%AAcanvas-clipXxx-amp-canvas-clipOutXxx"><span class="toc-text">3.8 裁剪canvas.clipXxx &amp; canvas.clipOutXxx</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-9-canvas%E5%8F%98%E6%8D%A2"><span class="toc-text">3.9 canvas变换</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-10-matrix%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%98%E6%8D%A2"><span class="toc-text">3.10 matrix自定义变换</span></a></li></ol></li></ol>
</div></main>
          <aside class="left-column">
            
            <div class="card card-author">
              
<img src="/img/ic_head.jpg" class="author-img">

<p class="author-name">Cupster</p>
<p class="author-description">深山磨柴斧，一鸣震江湖</p>
<div class="author-message">
  <a class="author-posts-count" href="/archives">
    <span>66</span>
    <span>文章</span>
  </a>
  <a class="author-categories-count" href="/categories">
    <span>5</span>
    <span>分类</span>
  </a>
  <a class="author-tags-count" href="/tags">
    <span>31</span>
    <span>标签</span>
  </a>
</div>

<div class="author-card-society">
  
    <div class="author-card-society-icon">
      <a target="_blank" rel="noopener" href="https://cupster.blog.csdn.net/">
        <i class="iconfont /img/ic_csdn.png society-icon"></i>
      </a>
    </div>
  
</div>

            </div>
            
            <div class="sticky-tablet">
  
  
  <article class="display-when-two-columns spacer">
    <div class="card card-content toc-card">
      <div class="toc-header"><i class="iconfont icon-menu" style="padding-right: 2px;"></i>目录</div>
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E7%AE%80%E4%BB%8B"><span class="toc-text">1.简介</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-Canvas-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%8A%9F%E8%83%BD"><span class="toc-text">2.Canvas 的常用功能</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-%E4%BD%BF%E7%94%A8"><span class="toc-text">3. 使用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-1-drawColor-amp-drawCircle"><span class="toc-text">3.1 drawColor() &amp; drawCircle()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-2-DrawRect"><span class="toc-text">3.2 DrawRect()</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-3-drawPoint-amp-drawPoints"><span class="toc-text">3.3 drawPoint() &amp; drawPoints()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-4-drawOval"><span class="toc-text">3.4 drawOval()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-5-drawLine-amp-drawLines"><span class="toc-text">3.5 drawLine() &amp; drawLines()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-6-%E7%BB%98%E5%88%B6%E5%BC%A7%E7%BA%BF-amp-%E6%89%87%E5%BD%A2"><span class="toc-text">3.6 绘制弧线 &amp; 扇形</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-7-%E7%BB%98%E5%88%B6path"><span class="toc-text">3.7 绘制path</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-8-%E8%A3%81%E5%89%AAcanvas-clipXxx-amp-canvas-clipOutXxx"><span class="toc-text">3.8 裁剪canvas.clipXxx &amp; canvas.clipOutXxx</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-9-canvas%E5%8F%98%E6%8D%A2"><span class="toc-text">3.9 canvas变换</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-10-matrix%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%98%E6%8D%A2"><span class="toc-text">3.10 matrix自定义变换</span></a></li></ol></li></ol>
    </div>
  </article>
  
  
  <article class="card card-content categories-widget">
    <div class="categories-card">
  <div class="categories-header"><i class="iconfont icon-fenlei" style="padding-right: 2px;"></i>分类</div>
  <div class="categories-list">
    
      <a href="/categories/Android/">
        <div class="categories-list-item">
          Android
          <span class="categories-list-item-badge">38</span>
        </div>
      </a>
    
      <a href="/categories/Linux/">
        <div class="categories-list-item">
          Linux
          <span class="categories-list-item-badge">6</span>
        </div>
      </a>
    
      <a href="/categories/Dev-Base/">
        <div class="categories-list-item">
          Dev-Base
          <span class="categories-list-item-badge">12</span>
        </div>
      </a>
    
      <a href="/categories/Kotlin/">
        <div class="categories-list-item">
          Kotlin
          <span class="categories-list-item-badge">9</span>
        </div>
      </a>
    
      <a href="/categories/自动化脚本/">
        <div class="categories-list-item">
          自动化脚本
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
  </div>
</div>
  </article>
  
  <article class="card card-content tags-widget">
    <div class="tags-card">
  <div class="tags-header"><i class="iconfont icon-biaoqian" style="padding-right: 2px;"></i>热门标签</div>
  <div class="tags-list">
    
    <a href="/tags/Android/" title="Android"><div class="tags-list-item">Android</div></a>
    
    <a href="/tags/Android自定义View/" title="Android自定义View"><div class="tags-list-item">Android自定义View</div></a>
    
    <a href="/tags/MacOS/" title="MacOS"><div class="tags-list-item">MacOS</div></a>
    
    <a href="/tags/Kotlin/" title="Kotlin"><div class="tags-list-item">Kotlin</div></a>
    
    <a href="/tags/Android持久化/" title="Android持久化"><div class="tags-list-item">Android持久化</div></a>
    
    <a href="/tags/CentOS/" title="CentOS"><div class="tags-list-item">CentOS</div></a>
    
    <a href="/tags/Linux/" title="Linux"><div class="tags-list-item">Linux</div></a>
    
    <a href="/tags/Android事件/" title="Android事件"><div class="tags-list-item">Android事件</div></a>
    
    <a href="/tags/Android基础/" title="Android基础"><div class="tags-list-item">Android基础</div></a>
    
    <a href="/tags/Android手势/" title="Android手势"><div class="tags-list-item">Android手势</div></a>
    
    <a href="/tags/Scrcpy/" title="Scrcpy"><div class="tags-list-item">Scrcpy</div></a>
    
    <a href="/tags/Android动画/" title="Android动画"><div class="tags-list-item">Android动画</div></a>
    
    <a href="/tags/Git/" title="Git"><div class="tags-list-item">Git</div></a>
    
    <a href="/tags/Java/" title="Java"><div class="tags-list-item">Java</div></a>
    
    <a href="/tags/Docker/" title="Docker"><div class="tags-list-item">Docker</div></a>
    
    <a href="/tags/Android-Dialog/" title="Android Dialog"><div class="tags-list-item">Android Dialog</div></a>
    
  </div>
</div>
  </article>
  
  
</div>
          </aside>
          <aside class="right-column">
            <div class="sticky-widescreen">
  
  
  <article class="card card-content toc-card">
    <div class="toc-header"><i class="iconfont icon-menu" style="padding-right: 2px;"></i>目录</div>
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E7%AE%80%E4%BB%8B"><span class="toc-text">1.简介</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-Canvas-%E7%9A%84%E5%B8%B8%E7%94%A8%E5%8A%9F%E8%83%BD"><span class="toc-text">2.Canvas 的常用功能</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-%E4%BD%BF%E7%94%A8"><span class="toc-text">3. 使用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-1-drawColor-amp-drawCircle"><span class="toc-text">3.1 drawColor() &amp; drawCircle()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-2-DrawRect"><span class="toc-text">3.2 DrawRect()</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-3-drawPoint-amp-drawPoints"><span class="toc-text">3.3 drawPoint() &amp; drawPoints()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-4-drawOval"><span class="toc-text">3.4 drawOval()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-5-drawLine-amp-drawLines"><span class="toc-text">3.5 drawLine() &amp; drawLines()</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-6-%E7%BB%98%E5%88%B6%E5%BC%A7%E7%BA%BF-amp-%E6%89%87%E5%BD%A2"><span class="toc-text">3.6 绘制弧线 &amp; 扇形</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-7-%E7%BB%98%E5%88%B6path"><span class="toc-text">3.7 绘制path</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-8-%E8%A3%81%E5%89%AAcanvas-clipXxx-amp-canvas-clipOutXxx"><span class="toc-text">3.8 裁剪canvas.clipXxx &amp; canvas.clipOutXxx</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-9-canvas%E5%8F%98%E6%8D%A2"><span class="toc-text">3.9 canvas变换</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-10-matrix%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8F%98%E6%8D%A2"><span class="toc-text">3.10 matrix自定义变换</span></a></li></ol></li></ol>
  </article>
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header"><i class="iconfont icon-wenzhang_huaban" style="padding-right: 2px;"></i>最近文章</div>
  <div class="recent-posts-list">
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2021-03-02</div>
        <a href="/2021/03/02/Git commit规范/"><div class="recent-posts-item-content">Git commit规范</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2021-02-16</div>
        <a href="/2021/02/16/AutoJS一文精通AutoJS脚本教程详解/"><div class="recent-posts-item-content">AutoJS一文精通AutoJS脚本教程详解</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2021-01-21</div>
        <a href="/2021/01/21/架构师进阶：注解Annotation全解/"><div class="recent-posts-item-content">架构师进阶：注解Annotation全解</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2021-01-06</div>
        <a href="/2021/01/06/ConstraintLayout详解/"><div class="recent-posts-item-content">ConstraintLayout详解</div></a>
      </div>
    
  </div>
</div>
  </article>
  
  
</div>
          </aside>
        </div>
      </div>
    </div>
  </div>
  
  <footer class="footer">
  <div class="footer-container">
    <div>
      <div class="footer-dsc">
        <span>Copyright ©
          
          2020 -
          
          2021
        </span>
        &nbsp;
        <a href="/" class="footer-link">不负明天 </a>
      </div>
    </div>

    
    <div class="footer-dsc">
      
      Powered by
      <a href="https://hexo.io/" class="footer-link" target="_blank" rel="nofollow noopener noreferrer">&nbsp;Hexo </a>
      
      
      <span>&nbsp;|&nbsp;</span>
      
      
      Theme -
      <a href="https://github.com/theme-kaze" class="footer-link" target="_blank"
        rel="nofollow noopener noreferrer">&nbsp;Kaze</a>
      
    </div>
    
    
    
    
      <div class="footer-dsc">
        
        本站总访问量686<span id="busuanzi_value_site_pv"></span>次
        
        
        <span>&nbsp;|&nbsp;</span>
        
        
        本站总访客数219<span id="busuanzi_value_site_uv"></span>次
        
      </div>
      
    
</footer>
  <a role="button" id="scrollbutton" class="basebutton"  aria-label="回到顶部">
  <i class="iconfont icon-arrowleft button-icon"></i>
</a>
<a role="button" id="menubutton" class="basebutton">
  <i class="iconfont icon-menu button-icon"></i>
</a>
<a role="button" id="popbutton" class="basebutton" aria-label="控制中心">
  <i class="iconfont icon-expand button-icon"></i>
</a>
<a role="button" id="darkbutton" class="basebutton darkwidget" aria-label="夜色模式">
  <i class="iconfont icon-weather button-icon"></i>
</a>
<a role="button" id="searchbutton" class="basebutton searchwidget" aria-label="搜索">
  <i class="iconfont icon-search button-icon"></i>
</a>

  
  
  
  <script>
  var addImgLayout = function () {
    var img = document.querySelectorAll('.post-content img');
    var i;
    for (i = 0; i < img.length; i++) {
      var wrapper = document.createElement('a');
      wrapper.setAttribute('href', img[i].getAttribute('data-src'));
      wrapper.setAttribute('aria-label', 'illustration');
      wrapper.style.cssText = 'width: 100%; display: flex; justify-content: center;';
      if (img[i].alt) wrapper.dataset.caption = img[i].alt;
      wrapper.dataset.nolink = true;
      img[i].before(wrapper);
      wrapper.append(img[i]);
      var divWrap = document.createElement('div');
      divWrap.classList.add('gallery');
      wrapper.before(divWrap);
      divWrap.append(wrapper);
    }
    baguetteBox.run('.gallery');
  }
</script>
<script>loadScript("/js/lib/lightbox/baguetteBox.min.js", addImgLayout)</script>
  
  
  
<script src="/js/main.js"></script>

  
  <script>loadScript("/js/lib/busuanzi.min.js")</script>
  
  
  <script>
    var addLazyload = function () {
      var observer = lozad('.lozad', {
        load: function (el) {
          el.srcset = el.getAttribute('data-src');
        },
        loaded: function (el) {
          el.classList.add('loaded');
        }
      });
      observer.observe();
    }
  </script>
  <script>loadScript("/js/lib/lozad.min.js", addLazyload)</script>
  
  
</body>

</html>